<template>
  <div class="tab-control">
      <div class="tab-control-item" v-for="(item,index) in titles" :key="index" :class="{active:index===currentIndex}"
      @click="tabClick(index)">
        <span>{{ item }}</span>
      </div>
  </div>
</template>

<script>
export default {
   name:'TabControl',
   props:{
    titles:{
        type:Array,
        default(){
            return []
        }
    }
   },
   data(){
    return{
      currentIndex:0
    }
   },
   methods:{
    tabClick(index){
      this.currentIndex=index
      this.$emit('hometabclick',index)
    }
   }
}
</script>

<style scoped>
.tab-control{
  display: flex;
  text-align: center
}
   .tab-control-item{
    flex:1;
    height:40px;
   }
   .active{
    color:pink;
    border-bottom:3px solid red;
   }
</style>